﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>奥力给数据可视化平台</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
    <link rel="stylesheet" href="../static/css/comon0.css">
    <style>
        .page{
            text-align:center;
            margin-top:50px;
            }
            .page a{
            text-decoration:none;
            border:1px solid #fff;
            padding:5px 7px;
            color:#767675;
            cursor:pointer;
            }
            .page a:hover,.page span:hover{            color: red;  }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fantasy Coming Soon Responsive Widget,Login form widgets,
Sign up Web forms , Login signup Responsive web form,
Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- CSS -->
<link href="/static/css/font-awesome.css" rel="stylesheet"><!-- Font-awesome-CSS -->
<link href="/static/css/style1.css" rel='stylesheet' type='text/css'/>
<!-- //CSS -->
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
<!-- Fonts -->
	<!-- Favicon -->
    <link rel="shortcut icon" href="/static/images/favicon.html">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Icons -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/ilmosys-icon.css">
    <link rel="stylesheet" href="/static/js/vendors/swipebox/css/swipebox.min.css">
    <!-- Theme CSS -->
    <link rel="stylesheet" href="/static/js/vendors/slick/slick.css">
    <!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<script type="text/javascript">
	$(document).ready(function(){
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i>=77){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.62'*i+'rem'},1000)
			}
	    	$(".wrap ul").animate({marginTop:-'.62'*i+'rem'},1000)
		},2400);
		var html2=$(".adduser ul").html()
		$(".adduser ul").append(html2)
		var ls2=$(".adduser li").length/2+1
		a=0
		ref = setInterval(function(){
			a++
			if(a==ls2){
				a=1
				$(".adduser ul").css({marginTop:0})
				$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
			}
	    	$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
		},4300);
	})
</script>
<body>
<header>
            <nav class="navbar-inverse navbar-lg navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                    </div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown mm-menu">
                                <a class="page-scroll" href="/index">主页</a>
                            </li>
                            <li class="dropdown mm-menu">
                                <a class="page-scroll" href="/details" target="_blank">更多数据分析</a>
                            </li>
                            <li class="dropdown mm-menu">
                                <a class="page-scroll" href="/news0" target="_blank">赛事资讯</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    <div class="loading">
        <div class="loadbox"> <img src="../static/images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1><img src="">泸溪河数据可视化平台</h1>
        <div class="weather"><img src=""><span>北京</span><span>{{date|safe}}</span></div>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 3.5rem">
                    <div class="alltitle"><a href="https://olympics.com/tokyo-2020/zh/">2020东京奥运会</a> </div>
                    <div class="sycm">
                        <img src="../static/images/olp2020.png">
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 6.65rem">
                    <div style="width:100%;height:5.25rem;">
                        <div id="treeMap1" style="width:450px;height:520px;"></div>
                    </div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">27</li>
                            <li class="pulll_left counter">0</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">已经开赛</li>
                            <li class="pulll_left">距离结束</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="boxall" style="height: 8.4rem">
                    <div class="alltitle">2020东京奥运会奖牌榜<a href="/dynaHistory" target="_blank">View more</a>
                        <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">排名&emsp;&emsp;&emsp;&emsp;国家或地区</li>
                            <li class="pulll_left">金牌&emsp;&emsp;银牌&emsp;&emsp;铜牌</li>
                        </ul>
                        </div>
                    </div>
                    <div class="wrap">
                        <table class="table table-hover table-striped">
                            <thead>
					            <tr><th>排名</th><th>国家或地区</th><th>金牌</th><th>银牌</th><th>铜牌</th></tr>
				            </thead>
                            <ul>
				            <tbody>
                                {% for item in medals_2020 %}
					            <a href="#" target="_blank"><tr><td>{{item.0}}</td><td>{{item.1}}</td><td>{{item.2}}</td><td>{{item.3}}</td><td>{{item.4}}</td></tr></a>
				                {% endfor %}
                            </tbody>
                            </ul>
                        </table>
                        <div class="boxfoot"></div>
                    </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">奖牌棒top5</div>
                    <div class="tabs">
                        <ul class="clearfix">
                            <div id="top5" style="width:450px;height:350px;"></div>
                        </ul>
                    </div>
                </div>
                <div class="boxall" style="height: 4.4rem">
                    <div class="alltitle">热门赛事（回放）</div>
                    <div class="adduser">
                        <ul>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000168561&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;男子10米跳台跳水决赛&emsp;  &emsp;&emsp;  2021-08-07  14:00</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000169260&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;乒乓球男子团体金牌赛 &emsp;  &emsp;&emsp;  2021-08-06  18:15</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000169346&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;乒乓球女子团体金牌赛&emsp;  &emsp;&emsp;  2021-08-06  18:15</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000170462&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;排球女子分组预选赛小组赛B组&emsp; &emsp;&emsp;   2021-08-02  15:05</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000176638&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;男子争先赛1/32决赛复活赛&emsp;  &emsp;&emsp;  2021-08-02  16:31</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000176604&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;游泳比赛收官日&emsp;&emsp;&emsp;    2021-08-01  09:15</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000176539&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;游泳男女4X100米混合泳接力&emsp;&emsp;&emsp;    2021-07-31  09:15</a>
                            </li>
                            <li>
                                <a href="https://www.miguvideo.com/mgs/website/prd/sportLive.html?mgdbId=120000176538&channelId=0132_CAAAB000902014800000000&pwId=3d21c7db29cd4911853ecc4b814bd9a3" target="_blank">&emsp;&emsp;&emsp;&emsp;田径第2比赛日晚场&emsp;&emsp;&emsp;    2021-07-31  17:50</a>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="../static/js/js.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/china.js"></script>
    <script type="text/javascript" src="../static/js/area_echarts.js"></script>
    <script type="text/javascript" src="../static/js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.countup.min.js"></script>
    <div id="main" style="width: 600px;height:400px;"></div>
<!-- Js-Files -->
	<script src="/static/js/particles1.js"></script>
	<script src="/static/js/app1.js"></script>
<!-- //Js-Files -->
<!--奖牌top5层叠图-->
<script type="text/javascript">
var chartDom = document.getElementById('top5');
var myChart = echarts.init(chartDom);
var option;
var country={{country|safe}};
var gold={{gold|safe}};
var silver={{silver|safe}};
var copper={{copper|safe}};

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // Use axis to trigger tooltip
            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
        }
    },
    legend: {
        data: ['金牌', '银牌', '铜牌'],
        textStyle: {
                    color: 'white',  //更改坐标轴文字颜色
                    fontSize : 14      //更改坐标轴文字大小
                }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLabel: {
                show: true,
                textStyle: {
                    color: 'white',  //更改坐标轴文字颜色
                    fontSize : 14      //更改坐标轴文字大小
                }
            },
    },
    yAxis: {
        type: 'category',
        data: country,
        axisLabel: {
                show: true,
                textStyle: {
                    color: 'white',  //更改坐标轴文字颜色
                    fontSize : 14      //更改坐标轴文字大小
                }
            },
    },
    series: [
        {
            name: '金牌',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: gold
        },
        {
            name: '银牌',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: silver
        },
        {
            name: '铜牌',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: copper
        },
    ]
};
option && myChart.setOption(option);
</script>
<!--矩形树图-->
<script type="text/javascript" src="../static/treemapdata.json"></script>
<script type="text/javascript">
var chartDom = document.getElementById('treeMap1');
var myChart = echarts.init(chartDom);
var option;
option = {
    tooltip: {
            formatter: function (arg) {
                return [
                    arg.name+':'+arg.value
                ].join('');
            }
    },
    series: [{
        name: 'Medals top10',
        type: 'treemap',
        visibleMin: 300,
        label: {
                    show: true,
                    formatter: '{b}'
                },
        upperLabel: {
                    show: true,
                    height: 30
                },
        itemStyle: {
                    borderColor: '#aaf'
                },
        data: treemapdata,
    }]
};
option && myChart.setOption(option);
</script>
</body>
</html>
